<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 | iBed-Server</title>
    <link rel="stylesheet" href="/static/css/register.css">
    <style>
        
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <nav class="nav">
            <a href="/static/html/login.html" id="loginLink">已有账号？立即登录</a>
        </nav>

        <div class="auth-container">
            <div class="auth-box">
                <h1 class="auth-title">用户注册</h1>
                
                <form id="registerForm" @submit.prevent="handleSubmit">
                    <div class="form-group">
                        <div class="form-label-container">
                            <label class="form-label" for="username">用户名</label>
                            <span class="error-label" v-if="errors.username">{{ errors.username }}</span>
                        </div>
                        <input 
                            type="text" 
                            id="username" 
                            class="form-input" 
                            :class="{ 'error-input': errors.username }"
                            placeholder="请输入用户名"
                            v-model="formData.username"
                            @input="clearError('username')"
                        >
                    </div>
    
                    <div class="form-group">
                        <div class="form-label-container">
                            <label class="form-label" for="email">电子邮箱</label>
                            <span class="error-label" v-if="errors.email">{{ errors.email }}</span>
                        </div>
                        <input 
                            type="text" 
                            id="email" 
                            class="form-input" 
                            :class="{ 'error-input': errors.email }"
                            placeholder="请输入电子邮箱"
                            v-model="formData.email"
                            @input="clearError('email')"
                        >
                    </div>
    
                    <div class="form-group">
                        <div class="form-label-container">
                            <label class="form-label" for="password">密码</label>
                            <span class="error-label" v-if="errors.password">{{ errors.password }}</span>
                        </div>
                        <input 
                            type="password" 
                            id="password" 
                            class="form-input" 
                            :class="{ 'error-input': errors.password }"
                            placeholder="请输入密码(至少6位)"
                            v-model="formData.password"
                            @input="clearError('password')"
                        >
                    </div>
    
                    <div class="form-group">
                        <div class="form-label-container">
                            <label class="form-label" for="confirmPassword">确认密码</label>
                            <span class="error-label" v-if="errors.confirmPassword">{{ errors.confirmPassword }}</span>
                        </div>
                        <input 
                            type="password" 
                            id="confirmPassword" 
                            class="form-input" 
                            :class="{ 'error-input': errors.confirmPassword }"
                            placeholder="请再次输入密码"
                            v-model="formData.confirmPassword"
                            @input="clearError('confirmPassword')"
                        >
                    </div>
    
                    <div class="agreement-container">
                        <label class="checkbox-label">
                            <input 
                                type="checkbox" 
                                name="agreement" 
                                v-model="formData.agreement"
                                @change="clearError('agreement')"
                            >
                            <span>我已阅读并同意<a href="/static/html/user-agreement.html" class="agreement-link">《用户协议》</a></span>
                            <span class="agreement-error" v-if="errors.agreement">{{ errors.agreement }}</span>
                        </label>
                    </div>
    
                    <button type="submit" class="submit-btn" :disabled="isSubmitting">
                        {{ isSubmitting ? '注册中...' : '立即注册' }}
                    </button>
                </form>
    
                <div class="auth-footer">
                    <p>已有账号？ <a href="/static/html/login.html" class="login-link">立即登录</a></p>
                </div>
            </div>
        </div>
    </div>
    <script src="/static/plugin/vue/vue.global.js"></script>
    <script src="/static/javascript/register.js"></script>
</body>
</html>